<template>
  <div class="main">
    <headerX></headerX>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(l, i) in banner" :key="i">
          <van-image width="100%" :src="l.src" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="top_title">
      <p class="tit_name">{{ data1.title }}</p>
      <p class="smalltit_name">
        {{ data1.subtitle }}
      </p>
      <p class="tit_money">
        <span>￥{{ data1.price_min }}-{{ data1.price_max }} </span>
        <span class="thought_money" style="">
          原价
          <span class="del"
            >¥ {{ data1.original_price_min }}-{{
              data1.original_price_max
            }}</span
          ></span
        >
      </p>
    </div>
    <div class="round_tit flex">
      <dl class="flex">
        <dt>
          <img
            src="https://oss.flowerplus.cn/oss_svg/2017-11-15/15107329932033.svg"
            alt=""
          />
        </dt>
        <dd>产地直采</dd>
      </dl>
      <dl class="flex">
        <dt>
          <img
            src="https://oss.flowerplus.cn/oss_svg/2017-11-15/15107329932033.svg"
            alt=""
          />
        </dt>
        <dd>花损赔付</dd>
      </dl>
      <dl class="flex">
        <dt>
          <img
            src="https://oss.flowerplus.cn/oss_svg/2017-11-15/15107329932033.svg"
            alt=""
          />
        </dt>
        <dd>准时送达</dd>
      </dl>
    </div>

    <div class="sales_des">
      <p>促销</p>
      <div class="sales_des_out">
        <p class="sales_gx">
          <span class="border1px sml H_gx">赠品</span>
          <span class="sml_des" style="margin-left: 40px"
            >新用户赠69元花瓶</span
          >
        </p>
        <p class="sales_gx">
          <span class="border1px sml H_gx">地图打卡4束</span>
          <span class="sml_des"
            >一月2束，隔周配送,四大产区(成都、栾川、甘肃、菏泽、昆明)颜色随机打卡，4.4起开始收花</span
          >
        </p>
        <p class="sales_gx">
          <span class="border1px sml H_gx">地图打卡8束</span>
          <span class="sml_des"
            >一月4束,每周配送,四大产区(成都、栾川、甘肃、菏泽、昆明)不同颜色打卡,4.4起开始收花</span
          >
        </p>
      </div>
    </div>

    <div>
      <img
        v-for="(l, i) in data1.detail_img"
        :key="i"
        :src="l.src"
        alt=""
        style="width: 100%"
      />
    </div>

    <div class="btn1">
      <p @click="$router.push({ name: 'shopping', query: { id } })">立即购买</p>
    </div>
    <div class="btn2">
      <p @click="joinshopcar">加入购物车</p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      id: "",
      banner: "",
      data1: "",
      num: 1,
    };
  },
  computed: {
    ...mapState([
      "username",
      "appphone",
      "count", // this.count => store.state.count
      "city",
      "msg",
      "flag",
      "obj",
    ]),
  },
  methods: {
    joinshopcar() {
      axios({
        method: "get",
        url: `http://localhost:3200/shopping?phone=${this.appphone}`,
      })
        .then((res) => {
          var data = res.data[0];
          // console.log(data);
          data.num += this.num;
          console.log(data.num);
          return data;
        })
        .then((res) => {
          axios.patch(`http://localhost:3200/shopping?phone=${this.appphone}`,res).then(res=>{
            console.log(res);
          })
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.$route.query.id);
    axios({
      method: "get",
      url: `http://localhost:3200/detail?id=${this.id} `,
    }).then((res) => {
      console.log(res);
      this.banner = res.data[0].carousel_info;
      this.data1 = res.data[0];
      console.log(res.data[0]);
    });
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  overflow: auto;
  .banner {
    width: 100%;
    img {
      width: 100%;
    }
  }

  .top_title {
    background: #fff;
    padding: 18px 12px;
    .tit_money {
      font-size: 20px;
      color: #fc6b80;
      font-weight: bold;
      margin-top: 16px;
    }
    .smalltit_name {
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
      line-height: 18px;
      margin: 6px 0;
    }
    .tit_name {
      font-size: 16px;
      font-weight: bold;
    }

    .thought_money {
      color: #999;
      font-size: 12px;
      font-weight: initial;
      .del {
        text-decoration: line-through;
      }
    }
  }
  .round_tit {
    padding: 12px;
    background: #fafafa;
    border-bottom: 8px solid #f5f5f5;
    justify-content: space-around;
    display: flex;
    dl {
      font-size: 12px;
      color: #999999;
      align-items: center;
      -webkit-align-items: center;
      margin-right: 15px;
      display: flex;
    }
  }

  .sales_des {
    background: #fff;
    padding-top: 15px;
    position: relative;
    border-bottom: 8px solid #f5f5f5;
    & > p {
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      position: absolute;
      left: 12px;
      top: 15px;
    }
    .sales_des_out {
      margin-left: 60px;
      overflow: hidden;
      padding-bottom: 5px;

      p {
        display: -webkit-flex;
        .H_gx {
          flex-shrink: 0;
          -webkit-flex-shrink: 0;
          height: 18px;
          line-height: 18px;
        }
        .sml_des {
          font-size: 12px;
          color: #111111;
          display: block;
        }
      }
    }
  }
  .sales_des_out .sml {
    font-size: 10px;
    color: #fc6b80;
    padding: 1px 5px;
    min-width: 45px;
    text-align: center;
    display: block;
    float: left;
    margin-right: 10px;
  }

  .btn1 {
    position: fixed;
    bottom: 0;
    z-index: 999;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    color: #fff;
    width: 50%;
    right: 0;
    height: 50px;
    background-color: #ff6672;
  }
  .btn2 {
    position: fixed;
    bottom: 0;
    z-index: 999;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    color: #fff;
    width: 50%;
    left: 0;
    height: 50px;
    background-color: #ff6672;
    border-right: 1px solid #fff;
  }
}
</style>